<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>事件的委派</title>
</head>
<body>
    <div id="conter">、
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
        <div class="title"></div>
    </div>
    <script>
        function random(number){
            return Math.floor(Math.random()*number)
        }
        function bgChange(){
            const color = `rgb(${random(255)} ${random(255)} ${random(255)})`
            return color;
        }
        const conter = document.querySelector("#conter")

        conter.addEventListener("click",(event)=>{
            event.target.style.backgroundColor = bgChange();
        })





    </script>

</body>
</html>
<style>
    .title{
        width: 25%;
        height: 100px;
        float: left;
    }
</style>